<template>
  <h4>爱好测试页面</h4>

  <input placeholder="请输入爱好" v-model="favorite">
  <button @click="addFavorite">添加爱好</button>
  <span>最新爱好: {{latestFavorite}}, 爱好数: {{favoriteCount}}</span>
  <br>
  <span>当前用户: {{userName}}, token: {{token}} </span>
</template>

<script>
import {ref} from 'vue'
import {mapState, mapGetters, useStore} from 'vuex'

export default {
  computed: {
    ...mapState(['userName', 'token']),
    ...mapGetters(['latestFavorite', 'favoriteCount'])
  },
  setup() {
    const store = useStore()

    let favorite = ref('')

    function addFavorite() {
      if (favorite.value){
        store.commit('addFavorite', favorite.value)
      }
    }

    return {favorite, addFavorite}
  },
}
</script>